<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放上传</title>
    <style>
        #imgContainer{background:#ccc;width:500px;height:500px;}
    </style>
</head>
<body>
    <div id="imgContainer"></div>
    <div id="msg"></div>
</body>
<script>
var imgContainer,msgDiv;
window.onload = function(e){
    imgContainer = document.getElementById('imgContainer');
    msgDiv = document.getElementById('msg');
    imgContainer.ondragover = function(e){
        e.preventDefault();
    }
    imgContainer.ondrop = function(e){
        e.preventDefault();
        var f = e.dataTransfer.files[0];   
        //模拟post请求上传
   
        //这时已经获取到文件了，具体想要用第几个文件自己处理，发post请求后端处理就行了！

        //下面是图片获取到之后显示在imgContainer中的流程
       
        //模拟post请求
       
			function post(URL, PARAMS) {
			  var temp = document.createElement("form");
			  temp.action = URL;
			  temp.method = "post";
			  temp.style.display = "none";
			  for (var x in PARAMS) {
			    var opt = document.createElement("textarea");
			    opt.name = x;
			    opt.value = PARAMS[x];
			    // alert(opt.name)
			    temp.appendChild(opt);
			  }
			  document.body.appendChild(temp);
			  temp.submit();
			  return temp;
			}
			post('','')
	     var fileReader = new FileReader();
         fileReader.onload=function(){
          imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
         }
         fileReader.readAsDataURL(f);
         showObj(e);   //显示上传信息
         showObj(e.dataTransfer.files);
    }
}
function showObj(obj){
    var s = '';
    for(var k in obj){s += k+":"+obj[k]+"<br/>";}
    msgDiv.innerHTML = s;
}
</script>
</html>